import React, {Component} from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { SliderButton, Button } from 'iftide';

export default class Basic extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }


    onRelease = (checked) => {
        console.log(checked)
    };

    onReset = () => {
        this.refs.slider0._onReset();
        this.refs.slider1._onReset();
        this.refs.slider2._onReset();
        this.refs.slider3._onReset();
    };

    render() {

        return (
            <ScrollView>
                <Text style={styles.text}>默认</Text>
                <View style={styles.container}>
                    <SliderButton
                        ref={'slider0'}
                        text={'滑动支付'}
                        onRelease={(checked) => this.onRelease(checked)}
                    />
                </View>
                <Text style={styles.text}>背景为图片</Text>
                <View style={styles.container}>
                    <SliderButton
                        ref={'slider1'}
                        text={'滑动支付'}
                        backgroundImage={require('./image/background.png')}
                        buttonImage={require('./image/arrow.png')}
                        onRelease={(checked) => this.onRelease(checked)}
                    />
                </View>
                <Text style={styles.text}>背景为颜色</Text>
                <View style={styles.container}>
                    <SliderButton
                        ref={'slider2'}
                        text={'slide to confirm'}
                        range={0.8}
                        isBackgroundImage={false}
                        onRelease={(index) => this.onRelease(index)}
                    />
                </View>
                <Text style={styles.text}>无背景</Text>
                <View style={styles.container}>
                    <SliderButton
                        ref={'slider3'}
                        text={'滑动支付'}
                        hasBackground={false}
                        isBackgroundImage={false}
                        range={0.8}
                        onRelease={(index) => this.onRelease(index)}
                        disabled={false}
                    />
                </View>
                <Text style={styles.text}>禁用</Text>
                <View style={styles.container}>
                    <SliderButton
                        text={'滑动支付'}
                        isBackgroundImage={false}
                        onRelease={(index) => this.onRelease(index)}
                        disabled={true}
                    />
                </View>
                <View style={[styles.container, {paddingTop: 20}]}>
                    <Button
                        title={'重置'}
                        size={'middle'}
                        onPress={() => this.onReset()}
                    />
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        margin: 15,
    }
});
